<template>
  <div class="root">
    <commentHeader>
      <div class="pet_list_name">
          <img :src="authorInfo.admin.avatar" alt>
          <p v-text="authorInfo.admin.name"></p>
      </div>
    </commentHeader>
    <div class="content">
      <h4>精彩评论</h4>
      <div class="sendComment">
        <div class="inputBox">发送评论</div>
        <div class="sendBtn">发送</div>
      </div>
      <div class="nocomment" v-if="commentList.length==0">还没有评论，快来评论一下吧。(*￣︶￣)</div>
      <div v-else class="commentBox">
        <div v-if='index<commentCount' class="contentList" v-for="(item,index) in commentList" :key="index">
          <img :src="item.user.avatar" alt>
          <div>
            <div class="title" v-text="item.user.nick"></div>
            <div class="contentInfo" v-text="item.content"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content" @click="commentCount=commentList.length">
      <p v-if='commentList.length<5||commentCount==commentList.length'>没有更多了</p>
      <p v-else>点击加载更多</p>
    </div>

    <div class="content">
      <h4>猜你喜欢</h4>
      <div class="fondBox">
        <div class="contentList" v-for="(item,index) in fondList" :key='index'>
          <img :src="item.picture1" alt="">
          <div>
            <div class="title" v-text="item.title"></div>
            <div class="contentInfo" v-text="item.seo_description"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commentHeader from "../components/comment/commentHeader";
export default {
  name: "",
  data() {
    return {
      authorInfo: "",
      // 评论初始显示个数
      commentCount:5,
      commentList: [],
      fondList: [],
      article_page: 1,
      loadingMore:false
    };
  },
  components: {
    commentHeader
  },
  created() {
    console.log(this.$route.query.article_id);
    this.authorInfo=JSON.parse(window.localStorage.getItem('pet_key')||'[]')
  },
  mounted() {
    this.getComments();
    this.getFonds();
    window.onscroll=this.didScroll;
  },
  methods: {
    // 热门评论
    getComments() {
      this.$http
        .get(
          "/pet/v2/articledecommenlist?page=1&article_id=" +
            this.$route.query.article_id
        )
        .then(
          data => {
            if (data.body.data) {
              this.commentList = data.body.data.list;
              console.log(this.commentList);
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 猜你喜欢
    getFonds() {
      this.$http
        .get("/pet/v2/articledeguess?article_page=" + this.article_page)
        .then(
          data => {
            console.log(data);
            if (data.body.data) {
              this.fondList = data.body.data.list;
              console.log(this.fondList);
            }
          },
          err => {
            console.log(err);
          }
        );
    },

    // 
    didScroll(){
      // 滚动的距离
      var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
      // 窗口的高度
      var screenHeight=window.innerHeight;
      // 获取内容的高度
      var contentHeight=document.body.clientHeight;
      if(scrollTop+screenHeight>contentHeight-100){
        if(this.loadingMore==false){
          this.loadMore();
        }
      }
    },
    loadMore(){
      this.loadingMore=true;
      this.article_page+=1;
      this.$http
        .get("/pet/v2/articledeguess?article_page=" + this.article_page)
        .then(
          data => {
            console.log(data);
            if (data.body.data) {
              this.fondList = this.fondList.concat(data.body.data.list);
              // console.log(this.fondList);
              this.loadingMore=false;
            }
          },
          err => {
            console.log(err);
          }
        );
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
img{
  vertical-align: bottom;
}
.root {
  padding: 0 2vw;
}

.pet_list_name {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -30vw;
}
.pet_list_name img {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  margin-right: 2vw;
}
.pet_list_name p {
  font-size: 3.2vw;
  color: #757575;
}
.content {
  margin-top: 3vw;
  background: #ffffff;
}
.content h4 {
  padding: 3vw 0 3vw 3vw;
  border-bottom: 1px solid #eee;
}
.content p {
  padding: 3vw 0 3vw 3vw;
  text-align: center;
  color: #d1d1d1;
}
.sendComment {
  display: flex;
  justify-content: space-between;
  padding: 2vw;
}
.sendComment .inputBox {
  width: 80vw;
  background: #d1d1d1;
  font-size: 3vw;
  padding: 2vw;
  border-radius: 1vw;
}
.sendComment .sendBtn {
  width: 10vw;
  background: #ff5656;
  font-size: 3.2vw;
  color: #ffffff;
  border-radius: 1vw;
  text-align: center;
  padding: 2vw 0;
}
.commentBox,.fondBox {
  padding: 0 5vw;
}
.contentList {
  display: flex;
  justify-content: flex-start;
  padding: 3vw 0;
  border-bottom: 1px solid #eee;
}
.contentList:last-child {
  border-bottom: none;
}
.contentList img {
  width: 10vw;
  height: 10vw;
  margin-right: 2vw;
  border-radius: 50%;
}
.nocomment {
  padding: 3vw 0;
  text-align: center;
}
.contentList .contentInfo {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 75vw;
  color: #a1a1a1;
  font-size: 3.6vw;
  padding: 1vw 0;
}
.fondBox .contentList{
  display: flex;
  justify-content: space-between;
}
.fondBox .contentList .title{
  font-weight:bold;
}
.fondBox .contentList img{
  width: 30vw;
  height: 22vw;
  border-radius: 0;
}
.fondBox .contentList div{
  width: 53vw;
}
</style>